<template>
  <div style="display: flex; background: #fff; width: 100%">
    <div class="panel" style="width: 30%">
      <div style="background: #eee; padding: 5px; font-size: 20px; color: #0087ac">角色列表</div>
      <div style="height: 350px; overflow: auto">
        <div
          class="item"
          v-for="role of roles"
          :key="role.id"
          @click="roleActive(role)"
          :class="{ active: activeRole.id === role.id }"
        >
          <div>
            {{ role.name }}
          </div>
          <div>
            <el-tag :type="role.status === 1 ? 'success' : 'danger'" size="small">
              <el-text :tag="role.status === 1 ? 'p' : 'del'">
                {{ role.status === 1 ? '可用' : '不可用' }}
              </el-text>
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    <div class="panel" style="flex: 1; display: flex">
      <div>
        <el-tree
          :data="menus"
          ref="tree"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          default-expand-all="true"
          style="width: 400px"
          check-strictly
          @check="handlerCheck"
        />
      </div>
      <div style="">
        <el-button type="primary" size="small" @click="saveRole">保存</el-button>
        <el-button type="default" size="small">取消</el-button>
        <el-button type="success" size="small" @click="insertLimit">权限新增</el-button>
      </div>
    </div>
  </div>
  <Limit ref="limit"></Limit>
</template>

<script setup>
import request from '@/util/request'
import { ElMessage, ElNotification } from 'element-plus'
import { onMounted, ref } from 'vue'
import Limit from '@/components/Limit.vue'

const defaultProps = {
  children: 'childMenu',
  label: 'menuName'
}

const roles = ref([])
const menus = ref([])
const tree = ref()

const limit = ref()

// 选中的角色
const activeRole = ref({})
// 设置的menuid
const roleMenusId = ref([])

const roleActive = (item) => {
  console.log('---------', item)

  activeRole.value = item
  roleMenusId.value = item.menuIds

  var arr = []
  roleMenusId.value.forEach((id) => {
    arr.push(id)
  })
  console.log(arr)

  tree.value.setCheckedKeys(arr, false)
}

const handlerCheck = (keys, nodes) => {
  console.log('选中了', keys, nodes)
  console.log('当前选中的节点')
}

const saveRole = () => {
  console.log('保存的id', tree.value.getCheckedKeys())
  const data = {
    menuIds: tree.value.getCheckedKeys(),
    roleId: activeRole.value.id
  }
  request
    .post('/admin/role/update', data)
    .then((res) => {
      if (res.code !== 200) {
        ElMessage.warning('抱歉，权限不足或者当前用户不可修改')
      } else {
        console.log('获取的数据', res)
        ElMessage.success('操作成功')
        getRoles()
        getMenus()
      }
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getRoles = () => {
  request
    .get('/admin/role/list')
    .then((res) => {
      if (res.code !== 200) {
        ElMessage.warning('数据获取失败')
      } else {
        roles.value = res.data
      }
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getMenus = () => {
  request
    .get('/admin/menu/list')
    .then((res) => {
      console.log('获取成功', res)
      if (res.code !== 200) {
        ElMessage.warning('数据获取失败')
      } else {
        menus.value = res.data
      }
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const insertLimit = () => {
  limit.value.open()
}

onMounted(() => {
  getRoles()
  getMenus()
})
</script>

<style scoped>
.panel {
  height: calc(100vh - 100px);
  padding: 20px;
  border: #eee 1px solid;
  overflow: auto;
}

.item {
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
  color: #000;
}

.item:hover {
  background: #eee;
  cursor: pointer;
  border: 1px #6b6b6b solid;
  color: #0087ac;
}

.active {
  color: #00359f;
  border: 1px #00359f solid;
}
</style>
